import styled from "styled-components";
import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Card,message } from "antd";
import React, { useState, useEffect } from "react";
import { login } from "../../services/graphql";
import store from "../../utils/store";

const App = ({ className }) => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(false);
	const [username, setUsername] = useState();
	const [password, setPassword] = useState();
	const onFinish = async(values) => {
		console.log("Received values of form: ", values);
		setLoading(true);
		let isOK=await login(values.username,values.password,values.remember);
		setLoading(false);
		if(isOK){
			message.success('Login succeeded.');
			navigate("/");
		}else{
			message.error('Account or password error.');
		}
	};
	useEffect(() => {
		let account=store.get("account");
		if(account){
			console.log(account.identity)
			setUsername(account.identity);
			setPassword(account.password);
		}
	}, []);
	return (
		<Card title="Admin login" className={className} bordered={false}>
			<Form
				name="normal_login"
				className="login-form"
				initialValues={{
					remember: true,
					username:username,
					password:password
				}}
				onFinish={onFinish}>
				<Form.Item
					name="username"
					rules={[
						{
							required: true,
							message: "Please input your Username!"
						}
					]}>
					<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
				</Form.Item>
				<Form.Item
					name="password"
					rules={[
						{
							required: true,
							message: "Please input your Password!"
						}
					]}>
					<Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="Password" />
				</Form.Item>
				{/* <Form.Item>
					<Form.Item name="remember" valuePropName="checked" noStyle>
						<Checkbox>Remember me</Checkbox>
					</Form.Item>

					<a className="login-form-forgot" href="">
						Forgot password
					</a>
				</Form.Item> */}

				<Form.Item>
					<Button loading={loading} disabled={loading} type="primary" htmlType="submit" className="login-form-button">
						Log in
					</Button>
				</Form.Item>
			</Form>
		</Card>
	);
};
export default styled(App)`
	max-width: 400px;
	margin: 100px auto;
	.login-form-forgot {
		float: right;
	}
	.ant-col-rtl .login-form-forgot {
		float: left;
	}
	.login-form-button {
		width: 100%;
	}
`;
